<style>
</style>
<template>
    <span>
    <Button @click="showDrawer" type="warning" size="small" style="margin-right: 5px">测评</Button>
        <Drawer title="员工测评" :closable="false" placement="right" v-model="staffDrawer" width="50%">
            <Row style="padding-top: 5px">
                <Table :loading="loading" border :columns="userColumns" :data="userData" ref="userTable"></Table>
            </Row>
        </Drawer>
        <Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="500">
            <Form ref="addUserForm" :model="addUserForm" :label-width="80">
                <FormItem label="评价" prop="hrScore">
                  <Select v-model="addUserForm.hrScore" style="width:200px">
                      <Option value="100" :key="1">优秀</Option>
                      <Option value="70" :key="2">良好</Option>
                      <Option value="50" :key="3">一般</Option>
                      <Option value="30" :key="4">需增强</Option>
                      <Option value="10" :key="5">差</Option>
                  </Select>
                </FormItem>
            </Form>
             <div slot="footer">
            <Button type="text" @click="cancelSubmit">取消</Button>
            <Button type="primary" :loading="submitLoading" @click="handleSubmit">确认添加</Button>
          </div>
        </Modal>
    </span>
</template>
<script>
    import {staffScore,hrGrade} from "@/api/bus";

    export default {
        name: "staffScore",
        props: {
            id: ""
        },
        data() {
            return {
                modalVisible: false,
                submitLoading:false,
                staffDrawer: false,
                modalTitle: '测评',
                loading: true,
                addUserForm: {
                    hrScore: "",
                    userabilityId: ""
                },
                permData: [],
                userColumns: [
                    {
                        type: "index",
                        width: 60,
                        align: "center"
                    },
                    {
                        title: "测评项目",
                        key: "examTypeName"
                    },
                    {
                        title: "测评得分",
                        key: "abilityScore",
                        sortable: true
                    },
                    {
                        title: "测评分段",
                        key: "duanName"
                    },
                    {
                        title: "hr测评得分",
                        key: "hrScore",
                        sortable: true
                    },
                    {
                        title: "操作",
                        key: "action",
                        width: 130,
                        align: "center",
                        fixed: "right",
                        render: (h, params) => {
                            if(params.row.examTypeCode == "education" ||
                                params.row.examTypeCode == "work" ||
                                params.row.examTypeCode == "synthesis"){
                                return "";
                            }
                            return h("div", [
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "info",
                                            size: "small"
                                        },
                                        on: {
                                            click: () => {
                                                this.markScore(params.row.id);
                                            }
                                        }
                                    },
                                    "评分"
                                )
                            ]);
                        }
                    }
                ],
                userData: [],
                totalUser: 0
            }
        },
        methods: {
            //加载数据
            showDrawer() {
                this.staffDrawer = true;
                this.getData();
            },
            getData() {
                this.loading = true;
                staffScore(this.id).then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.userData = res.data.rows;
                    }
                });
            },
            markScore(uId) {
                this.modalVisible = true;
                this.addUserForm.userabilityId = uId;
            },
            cancelSubmit() {
                this.modalVisible = false;
            },
            handleSubmit() {
                hrGrade(this.addUserForm).then(res => {
                    this.modalVisible = false;
                    this.getData();
                });
            }
        },
        mounted() {

        }
    }
</script>